import './index.scss';
import React, { FC, ReactElement } from 'react';
import { IFlatPhones, IPhones } from '../../typings';
import { useFlatPhoneList } from '../../hooks';

import PhoneItem from './Item';

interface IProps {
  phoneList: IPhones[];
}

export const PhoneList: FC<IProps> = ({ phoneList }): ReactElement => {
  //扁平化后端请求的列表数据
  const flatPhoneList: IFlatPhones[] = useFlatPhoneList(phoneList);

  return (
    <div className="phone-list">
      {flatPhoneList.map((phone: IFlatPhones, index: number) => {
        return <PhoneItem dataItem={phone} key={index} />;
      })}
    </div>
  );
};
